<template>
	<div class="videostyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<div class="title">设置视频</div>
					<el-form label-width="100px">
						<el-form-item label="封面链接:">
							<div @click="choiceMediaFile(0)" class="choice-image cursor-pointer choice-image-delete">
								<el-image class="cover-image" :src="STATIC_URL + datas.poster" fit="cover" v-if="datas.poster != ''" />
								<SvgIcon v-else name="ele-Plus"></SvgIcon>
								<div class="delete-content" @click.stop="datas.poster = ''" v-if="datas.poster != ''">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>
								</div>
							</div>
						</el-form-item>
						<el-form-item label="视频链接:">
							<div @click="choiceMediaFile(1)" class="video cursor-pointer choice-image-delete">
								<video
									:src="STATIC_URL + datas.src"
									controls
									:autoplay="datas.autoplay == 1 ? true : false"
									:poster="STATIC_URL + datas.coverUrl"
									v-if="datas.src != ''"
									style="width: 250px; height: 120px; object-fit: fill"
								></video>
								<SvgIcon v-else name="ele-Plus"></SvgIcon>

								<div class="delete-content" @click.stop="datas.src = ''" v-if="datas.src != ''">
									<SvgIcon name="ele-DeleteFilled"></SvgIcon>
								</div>
							</div>
						</el-form-item>
						<!-- 是否自动播放 -->
						<el-form-item label="自动播放">
							<el-switch v-model="datas.autoplay" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
							<!-- {{ datas.autoplay ? '是' : '否' }}
							<el-checkbox style="margin-left: 196px" v-model="datas.autoplay" /> -->
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
	</div>
</template>

<script setup lang="ts" name="videostyle">
import { defineAsyncComponent, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';

const VideoPlayer = defineAsyncComponent(() => import('/@/components/player/video/index.vue'));

const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const fit = ref('contain');
const props = defineProps({
	datas: {},
});

/**
 * 媒体类型
 * 0: 封面
 * 1: 视频文件
 */
const choiceMediatype = ref(0);
const FileChoiceRef = ref();

const choiceFile = (res: any) => {
	// console.log('prefix: ', this.prefix);

	if (choiceMediatype.value == 0) {
		// 封面
		props.datas.poster = res[0].visitRelativePath;
	} else {
		// 视频
		props.datas.src = res[0].visitRelativePath;
	}
};

const choiceMediaFile = (mediaType: number) => {
	console.log('mediaType: ', mediaType);
	choiceMediatype.value = mediaType;
	FileChoiceRef.value.openFileChoiceDialog();
};
</script>

<style scoped lang="scss">
.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}

	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

.image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border: 1px dashed var(--el-border-color-darker);
}

.video {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 250px;
	height: 120px;
	border: 1px dashed var(--el-border-color-darker);
	position: relative;
}

.delete-content {
	cursor: pointer;
}
</style>
